import ChangeList from '@/pages/Devops/CI/changeList';
import PipelineRuns from '@/pages/Devops/CI/history';
import {
  CheckCircleFilled,
  CiCircleOutlined,
  ClockCircleFilled,
  CloseCircleFilled,
  FileTextOutlined,
  MinusCircleFilled,
  PlayCircleOutlined,
} from '@ant-design/icons';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import {
  Button,
  Card,
  ConfigProvider,
  Descriptions,
  DescriptionsProps,
  Divider,
  Segmented,
  Tabs,
  Typography,
} from 'antd';
import React, { useState } from 'react';
import './DynamicBorderCard.css';

const { Text } = Typography;

const Index: React.FC = () => {
  const [current, setCurrent] = useState(0);
  const [open, setOpen] = useState(false);

  const buildBaseInfo: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '触发信息',
      children: '张三-页面手动触发',
    },
    {
      key: '2',
      label: '开始时间',
      children: '2022-09-23 18:02:28',
    },
    {
      key: '3',
      label: '持续时间',
      children: '1分20秒',
    },
    {
      key: '4',
      label: '构建序号',
      children: <text>5</text>,
    },
    {
      key: '5',
      label: '运行结果',
      children: <Text type={'danger'}>运行失败</Text>,
    },
  ];
  const buildSource: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '仓库信息',
      children: ' springcloud-2.8.1',
    },
    {
      key: '2',
      label: '代码分支',
      children: 'release/2025-02-22-1111',
    },
    {
      key: '3',
      label: '最后提交',
      children: 'asd1234dca34',
    },
  ];
  const buildImage: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '镜像TAG',
      children: 'harbor.36588.com/price/price-admin-web:2024032113870',
    },
  ];

  const latestRun = (
    <>
      <ProCard split={'vertical'} headerBordered style={{ height: '80vh', borderRadius: 0 }}>
        <ProCard colSpan={'15%'} size={'small'}>
          <Descriptions
            title={'基础信息'}
            items={buildBaseInfo}
            column={1}
            contentStyle={{ justifyContent: 'flex-end' }}
          />
          <Divider />
          <Descriptions
            title={'代码源信息'}
            items={buildSource}
            column={1}
            contentStyle={{ justifyContent: 'flex-end' }}
          />
          <Divider />
          <Descriptions
            title={'构建产物'}
            items={buildImage}
            column={1}
            contentStyle={{ justifyContent: 'flex-end' }}
          />
        </ProCard>
        <ProCard split={'vertical'} style={{ height: '100%' }}>
          <ProCard
            title={<Text type={'secondary'}>变更管理器</Text>}
            style={{ height: '100%', background: '#f5f5f5', borderRadius: 0 }}
            bordered
          >
            <ProCard
              title={
                <div style={{ padding: 6, display: 'flex', gap: 6 }}>
                  <CheckCircleFilled style={{ color: '#15d05b' }} />
                  <b>变更管理器</b>
                </div>
              }
              size={'small'}
              actions={[
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: 20 }}>
                  <small style={{ display: 'flex', gap: 5 }}>
                    <FileTextOutlined />
                    日志
                  </small>
                  <small>15秒</small>
                </div>,
              ]}
              style={{
                height: 180,
                borderTopColor: '#15D05B91',
                borderTopStyle: 'solid',
                borderWidth: 4,
              }}
              layout={'center'}
            >
              <div>
                <span>运行成功</span>
              </div>
            </ProCard>
          </ProCard>
          <ProCard
            title={<Text type={'secondary'}>变更准入卡点</Text>}
            style={{ height: '100%', background: '#f5f5f5', borderRadius: 0 }}
          >
            <ProCard
              title={
                <div style={{ padding: 6, display: 'flex', gap: 6 }}>
                  <CloseCircleFilled style={{ color: '#DE0C32BC' }} />
                  <b>变更准入卡点</b>
                </div>
              }
              size={'small'}
              actions={[
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: 20 }}>
                  <small style={{ display: 'flex', gap: 5 }}>
                    <FileTextOutlined />
                    日志
                  </small>
                  <small>15s</small>
                </div>,
              ]}
              style={{
                height: 180,
                borderTopColor: '#ff6d6a',
                borderTopStyle: 'solid',
                borderWidth: 4,
              }}
              layout={'center'}
            >
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
              >
                <span style={{ color: '#DE0C32BC' }}>运行失败</span>
                <small style={{ color: 'gray' }}>运行失败，请查看日志!</small>
              </div>
            </ProCard>
          </ProCard>
          <ProCard
            title={<Text type={'secondary'}>构建</Text>}
            style={{ height: '100%', background: '#f5f5f5', borderRadius: 0 }}
            bordered
          >
            <ProCard
              title={
                <div style={{ padding: 6, display: 'flex', gap: 6 }}>
                  <MinusCircleFilled style={{ color: 'rgba(24,120,255,0.93)' }} spin />
                  <b>构建镜像并上传至仓库</b>
                </div>
              }
              size={'small'}
              actions={[
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: 20 }}>
                  <small style={{ display: 'flex', gap: 5 }}>
                    <FileTextOutlined />
                    日志
                  </small>
                  <small>15秒</small>
                </div>,
              ]}
              style={{
                height: 180,
                borderTopColor: '#1878FF8E',
                borderTopStyle: 'solid',
                borderWidth: 4,
              }}
              layout={'center'}
            >
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
              >
                <span>运行中</span>
              </div>
            </ProCard>
          </ProCard>
          <ProCard
            title={<Text type={'secondary'}>部署</Text>}
            style={{ height: '100%', background: '#f5f5f5', borderRadius: 0 }}
          >
            <ProCard
              title={
                <div style={{ padding: 6, display: 'flex', gap: 6 }}>
                  <ClockCircleFilled style={{ color: 'gray' }} />
                  <b>部署至环境</b>
                </div>
              }
              size={'small'}
              actions={
                [
                  // <div style={{display: "flex", justifyContent:"space-between", padding:20}}>
                  //   <small>日志</small>
                  //   <small>15s</small>
                  // </div>
                ]
              }
              style={{
                height: 180,
                borderTopColor: '#c7c4c4',
                borderTopStyle: 'solid',
                borderWidth: 4,
              }}
              layout={'center'}
            >
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
              >
                <span>等待中</span>
              </div>
            </ProCard>
          </ProCard>
        </ProCard>
      </ProCard>
    </>
  );

  return (
    <PageContainer title={false}>
      {/*<div style={{ display: 'flex', background: 'white', marginBottom: 1, padding: 12 }}>*/}
      {/*  <ConfigProvider*/}
      {/*    theme={{*/}
      {/*      components: {*/}
      {/*        Segmented: {*/}
      {/*          itemSelectedBg: '#c5e8ff',*/}
      {/*        },*/}
      {/*      },*/}
      {/*    }}*/}
      {/*  >*/}
      {/*    <Segmented*/}
      {/*      shape="round"*/}
      {/*      size={"large"}*/}
      {/*      defaultValue={'test'}*/}
      {/*      options={[*/}
      {/*        {*/}
      {/*          value: 'test',*/}
      {/*          label: (*/}
      {/*            <>*/}
      {/*              测试阶段*/}
      {/*              <RightOutlined />*/}
      {/*            </>*/}
      {/*          ),*/}
      {/*        },*/}
      {/*        {*/}
      {/*          value: 'pre',*/}
      {/*          label: (*/}
      {/*            <>*/}
      {/*              预发阶段*/}
      {/*              <RightOutlined />*/}
      {/*            </>*/}
      {/*          ),*/}
      {/*        },*/}
      {/*        { value: 'prod', label: <>生产阶段</> },*/}
      {/*      ]}*/}
      {/*    />*/}
      {/*  </ConfigProvider>*/}
      {/*  /!*<div style={{ marginLeft: 'auto' }}>*!/*/}
      {/*  /!*  <Button type={'dashed'}>编辑流水线</Button>*!/*/}
      {/*  /!*</div>*!/*/}
      {/*</div>*/}

      {/*<div>*/}
      {/*  <Alert message="公告：持续构建，只做产物" type="info" showIcon closable/>*/}
      {/*</div>*/}
      <ConfigProvider
        theme={{
          components: {
            Segmented: {
              trackBg: 'white',
              itemSelectedBg: 'rgb(189,223,245)',
            },
          },
        }}
      >
        <div style={{ marginBottom: 2 }}>
          <Segmented
            options={[
              {
                value: '测试阶段',
                label: (
                  <div style={{ textAlign: 'left', padding: 5 }}>
                    <CiCircleOutlined style={{ marginRight: 5 }} />
                    测试阶段
                  </div>
                ),
              },
              {
                value: '预发阶段',
                label: (
                  <div style={{ textAlign: 'left', padding: 5 }}>
                    <CiCircleOutlined style={{ marginRight: 5 }} />
                    预发阶段
                  </div>
                ),
              },
              {
                value: '生产阶段',
                label: (
                  <div style={{ textAlign: 'left', padding: 5 }}>
                    <CiCircleOutlined style={{ marginRight: 5 }} />
                    生产阶段
                  </div>
                ),
              },
            ]}
            block
            defaultValue={'测试阶段'}
            style={{ padding: '3px' }}
          />
        </div>
      </ConfigProvider>

      <Card size={'small'}>
        <Tabs
          size={'small'}
          defaultActiveKey="1"
          items={[
            { label: '最近运行', key: '1', children: latestRun },
            { label: '运行记录', key: '2', children: <PipelineRuns /> },
          ]}
          onChange={(key) => {
            console.log(key);
          }}
          tabBarExtraContent={
            <Button icon={<PlayCircleOutlined />} type={'primary'}>
              运行
            </Button>
          }
        />
      </Card>
      <div>
        <ChangeList open={open} onClose={() => setOpen(false)} />
      </div>
    </PageContainer>
  );
};
export default Index;
